<template>
  <div class="playlists-container">
    <!-- 头部区域 -->
    <div class="top-card">
      <div class="icon-wrap">
        <img :src="qualitList.coverImgUrl" alt=""/>
      </div>
      <div class="content-wrap">
        <div class="tag">精品歌单</div>
        <div class="title">{{qualitList.name}}</div>
        <div class="info">{{qualitList.description}}</div>
      </div>
      <img class="bg" :src="qualitList.coverImgUrl" alt=""/>
      <div class="bg-mask"></div>
    </div>
    <!-- 精品歌单 -->
    <div class="tab-container">
      <div class="tab-bar">
        <span class="item"
        :class="{active : tag == navObj}"
        @click="tag=navObj"
        v-for="(navObj,index) in navList" :key="index">{{navObj}}</span>
      </div>
      <div class="tab-content">
        <div class="items">
          <div class="item"
          v-for="songObj in songList" :key="songObj.id">
            <div class="img-wrap">
              <div class="num-wrap">
                播放量：
                <span class="num">{{songObj.playCount}}</span>
              </div>
              <img :src="songObj.coverImgUrl" alt=""/>
              <span class="iconfont icon-play"
              @click="playSong(songObj.id)"></span>
            </div>
            <p class="name">{{songObj.name}}</p>
          </div>
        </div>
      </div>
    </div>
    <!--
      total总条数
      current-page 当前页
      page-size 每页多少条数据
    -->
    <el-pagination
    @current-change="changeCurrent"
    :total="total"
    :current-page="page"
    :page-size="10"
      background
      layout="prev, pager, next">
    </el-pagination>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      // 推荐歌单
      qualitList: {},
      // 歌曲列表
      songList: [],
      navList: [
        '全部',
        '欧美',
        '华语',
        '流行',
        '说唱',
        '摇滚',
        '民谣',
        '电子',
        '轻音乐',
        '影视原声',
        'ACG',
        '怀旧',
        '治愈',
        '旅行'
      ],
      // 当前选择的数据
      tag: '全部',
      total: 10,
      page: 1
    }
  },
  created () {
    this.loadTop()
    this.loadSongList()
  },
  watch: {
    tag () {
      this.loadTop()
      this.loadSongList()
      // 切换时页码为1
      this.page = 1
    }
  },
  methods: {
    loadTop () {
      axios({
        url: 'https://autumnfish.cn/top/playlist/highquality',
        method: 'get',
        params: {
          limit: 10,
          cat: this.tag
        }
      }).then(res => {
        this.qualitList = res.data.playlists[0]
        // console.log(res)
      })
    },
    loadSongList () {
      axios({
        url: 'https://autumnfish.cn/top/playlist/',
        method: 'get',
        params: {
          limit: 10,
          // 起始的值  （页码-1）*每页多少条数据
          offset: (this.page - 1) * 10,
          cat: this.tag
        }
      }).then(res => {
        const { playlists, total } = res.data
        this.songList = playlists
        this.total = total
        // console.log(res)
      })
    },
    // 改变当前页码 page ==当前是那一页
    changeCurrent (page) {
      // console.log(page)
      this.page = page
      this.loadSongList()
    },
    // 播放音乐
    playSong (id) {
      axios({
        url: 'https://autumnfish.cn/song/url',
        method: 'get',
        params: {
          id
        }
      }).then(res => {
        this.$parent.musicUrl = res.data.data[0].url
      })
    }
  }
}
</script>
